<template>
  <div class="teacher">
    <div class="top1">
      <ul class="ul">
        <li @click="num = 1">Java</li>
        <li @click="num = 2">Phthon</li>
        <li @click="num = 3">Web</li>
        <li @click="num = 4">Ui设计</li>
        <li @click="num = 5">Linux</li>
      </ul>
      <div class="content" v-if="num == 1">
        <ul class="cc">
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109105342884.jpg"
              alt=""
            />
            <h3>马老师</h3>
            <hr />
            <br />
            <p>
              优就业Java研究院院长
              7年JavaEE开发经验，5年教学经验，高级Java工程师、高级Java讲师。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109110959719.jpg"
              alt=""
            />
            <h3>赵老师</h3>
            <hr />
            <br />
            <p>
              解放军信息工程大学计算机技术专业硕士。20多年计算机信息系统设计与项目开发经验，获得军队科技进步奖。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109105319126.jpg"
              alt=""
            />
            <h3>王老师</h3>
            <hr />
            <br />
            <p>
              10年互联网软件开发经验，4年教学经验，曾参与研发香港交通署交通信息综合管理平台、浪潮烟草综合信息管理系统、浪潮税务综合管理平台
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109105149124.jpg"
              alt=""
            />
            <h3>苏老师</h3>
            <hr />
            <br />
            <p>
              7年软件研发经验，5年教学经验，曾参与研发工商银行IAM项目、恒丰银行UCM项目、VDA项目管理平台等，擅长各种应用服务平台的研发
            </p>
            <p></p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109105409469.jpg"
              alt=""
            />
            <h3>李老师</h3>
            <hr />
            <br />
            <p>
              西安电子科技大学计算机科学与技术专业。7年软件开发经验，4年教学经验。主攻C++、Python、Java、SQLServer、MySQL、Oracle等编程语言
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109105746814.jpg"
              alt=""
            />
            <h3>王老师</h3>
            <hr />
            <br />
            <p>
              多年移动互联网产品设计和开发经验，曾参与市级财务系统、工会宣传、企业管理等系统的开发
            </p>
          </li>
        </ul>
      </div>
      <div class="content" v-else-if="num == 2">
        <ul class="cc">
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109112049976.jpg"
              alt=""
            />
            <h3>刘老师</h3>
            <hr />
            <br />
            <p>天津大学计算机科学与技术专业。8年开发经验，4年授课经验</p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0916/20190916020031865.jpg"
              alt=""
            />
            <h3>崔老师</h3>
            <hr />
            <br />
            <p>北京邮电大学博士学位，拥有10年以上的开发经验，多年教学经验</p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109033508232.jpg"
              alt=""
            />
            <h3>张老师</h3>
            <hr />
            <br />
            <p>
              多年PHP项目开发经验，曾担任企业项目经理多年，深入掌握项目开发整体流程。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0513/20190513025337648.jpg"
              alt=""
            />
            <h3>宋老师</h3>
            <hr />
            <br />
            <p>
              河南大学控制工程专业硕士，曾参与自然科学基金“面向复杂系统估计的采样型非线性滤波方法研究”、河南省科学技术研究重点项目
            </p>
            <p></p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0225/20190225023609803.png"
              alt=""
            />
            <h3>边老师</h3>
            <hr />
            <br />
            <p>
              多年Python开发经验，开发了基于数据可视化的舆情监控系统、基于中国建筑
              设计院的建筑标准的BIM管理平台。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0306/20190306094014492.jpg"
              alt=""
            />
            <h3>李老师</h3>
            <hr />
            <br />
            <p>
              多年Python开发经验，参与开发了黑客画像系统、旅行网站、小说网站等项目
            </p>
          </li>
        </ul>
      </div>
      <div class="content" v-else-if="num == 3">
        <ul class="cc">
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109064450110.jpg"
              alt=""
            />
            <h3>周老师</h3>
            <hr />
            <br />
            <p>
              优8年Web全栈开发经验，大型企业Web前端开发技术总监，有丰富的大型团队管理经验
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109033508232.jpg"
              alt=""
            />
            <h3>张老师</h3>
            <hr />
            <br />
            <p>
              多年PHP项目开发经验，曾担任企业项目经理多年，深入掌握项目开发整体流程。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109112624948.jpg"
              alt=""
            />
            <h3>范老师</h3>
            <hr />
            <br />
            <p>
              曾担任某大型职业教育培训公司-高级Web前端开发工程师，具有多年项目开发经验
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109044511778.jpg"
              alt=""
            />
            <h3>唐老师</h3>
            <hr />
            <br />
            <p>某科技公司高级前端开发工程师，多年大中型项目开发经验</p>
            <p></p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0520/20190520111443306.jpg"
              alt=""
            />
            <h3>江老师</h3>
            <hr />
            <br />
            <p>
              某科技公司高级前端开发工程师，参与开发过的项目有大型金融业务类网站、CMS系统、企业门户网站、移动端Web、APP等
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109111957887.jpg"
              alt=""
            />
            <h3>赵老师</h3>
            <hr />
            <br />
            <p>多年实战开发经验以及教学经验</p>
          </li>
        </ul>
      </div>
      <div class="content" v-else-if="num == 4">
        <ul class="cc">
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109014053660.jpg"
              alt=""
            />
            <h3>岳老师</h3>
            <hr />
            <br />
            <p>
              网站设计实战讲师，近10年设计行业从业经验，专门从事企业高级视觉设计，有较强的设计理论功底和实战经验。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0516/20190516094131820.jpg"
              alt=""
            />
            <h3>霍老师</h3>
            <hr />
            <br />
            <p>
              毕业于中央民族大学，从事设计行业8年，精通photoshop、illustrator，AxureRP等常用设计软件，熟练掌握Html，CSS等前端技术。
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109013552638.jpg"
              alt=""
            />
            <h3>胡老师</h3>
            <hr />
            <br />
            <p>
              毕业于中国艺术研究院
              ,13年UI设计与项目开发经验;曾在某大型培训机构从事近10年的教学工作;
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0911/20190911034314855.jpg"
              alt=""
            />
            <h3>苏老师</h3>
            <hr />
            <br />
            <p>
              高级讲师 清华大学美术学院艺术硕士，拥有16年设计及设计管理经验，
            </p>
            <p></p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109013526885.jpg"
              alt=""
            />
            <h3>李老师</h3>
            <hr />
            <br />
            <p>毕业于四川美术学院，从事设计行业多年</p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109113814888.jpg"
              alt=""
            />
            <h3>郑老师</h3>
            <hr />
            <br />
            <p>
              8年设计工作经验，曾自主创建工作室，专门从事网站建设、软件设计等业务
            </p>
          </li>
        </ul>
      </div>
      <div class="content" v-else>
        <ul class="cc">
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109033223782.jpg"
              alt=""
            />
            <h3>李老师</h3>
            <hr />
            <br />
            <p>北京大学软件工程专业硕士学位。</p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109033434196.jpg"
              alt=""
            />
            <h3>王老师</h3>
            <hr />
            <br />
            <p>
              曾负责某大型电商Linux系统层部署优化、线下服务器Linux操作系统软件的安装管理、OpenStack试验云实验室搭建与维护
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109033116225.jpg"
              alt=""
            />
            <h3>袁老师</h3>
            <hr />
            <br />
            <p>
              英国赫特福德大学软件工程专业硕士。曾在国内某大型培训机构任教多年，拥有丰富的教学培训工作经验，
            </p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0513/20190513032657934.jpg"
              alt=""
            />
            <h3>徐老师</h3>
            <hr />
            <br />
            <p>
              拥有多年Linux运维经验，积累了丰富的理论知识和实战经验，曾负责某大型金融集团公司企业私有云的搭建和运维工作。
            </p>
            <p></p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/1204/20191204052038985.jpg"
              alt=""
            />
            <h3>郑老师</h3>
            <hr />
            <br />
            <p>郑州大学硕士学历，具有多年Linux系统开发和教学管理经验，</p>
          </li>
          <li>
            <img
              src="http://www.ujiuye.com/uploadfile/2019/0109/20190109045506658.jpg"
              alt=""
            />
            <h3>胡老师</h3>
            <hr />
            <br />
            <p>
              优就业软件测试高级讲师
              计算机硕士研究生毕业，曾就职于东软集团、联想集团等大型互联网公司
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
};
</script>

<style scoped>
.top1 {
  display: flex;
  flex-direction: column;
}
.top1 .ul {
  list-style: none;
  text-align: center;
  display: flex;
  justify-content: space-around;
  height: 50px;
  width: 100%;
}
.top1 .ul li {
  background-color: #ccc;
  width: 100%;
  color: rgb(38, 233, 152);
  line-height: 50px;
  height: 50px;
  opacity: 0.7;
  cursor: pointer;
}
.top1 .ul li:hover {
  background-color: darkkhaki;
  color: #fff;
}
.content {
  flex: 1;
}
.content .cc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-evenly;
}
.content .cc li {
  width: 370px;
  height: 280px;
}
.content p,
h3 {
  display: inline-block;
}
img {
  max-width: 40%;
}
</style>